<template>
    <div class="t1">

        <div class="t5">
            <div class="t9" style="display: flex;flex-direction: column;justify-content: center;">
                <span class="s1">{{ $t('text.Customer.l72') }}</span>
                <div class="i1">
                    <div class="i2"></div>
                    <div class="i3">75</div>
                </div>
                <div class="s1">{{ $t('text.Customer.l73') }}</div>
                <div class="i4">100万-200万</div>
                <div class="i5">
                    <div style="flex: 1;">
                        <div>{{ $t('text.House.l97') }}</div>
                        <div class="i6">90m²-120m²</div>
                    </div>
                    <div style="width: 10px;"></div>
                    <div style="flex: 1;">
                        <div>{{ $t('text.Customer.l75') }}</div>
                        <div class="i6">2 {{  $t('text.House.l198') }}</div>
                    </div>
                </div>
            </div>

            <div class="t9" style="flex: 3;">
                <Chart2 :id="'c2'" :title="$t('text.Customer.l77')"></Chart2>
            </div>
        </div>


        <div class="t5">
            <div class="t9">
                <Chart3 :id="'c3'" :title="$t('text.Customer.l78')" :bottomList="c3" :allList="c3All"></Chart3>
            </div>
            <div class="t9">
                <Chart3 :id="'c4'" :title="$t('text.Customer.l79')" :bottomList="c4" :allList="c4All"></Chart3>
            </div>
            <div class="t9">
                <Chart3 :id="'c5'" :title="$t('text.Customer.l80')" :bottomList="c5" :allList="c5All"></Chart3>
            </div>
        </div>

    </div>
</template>
    
<script>
import Chart2 from '@/components/chart/Chart2.vue';
import Chart3 from '@/components/chart/Chart3.vue';


export default {
    name: 'CustomerAnalysis',
    components: {
    Chart2,
    Chart3
},
    props: {
    },
    data() {
        return {
            c3: [this.$t('text.Customer.l81'), this.$t('text.Customer.l82'), this.$t('text.Customer.l83'), this.$t('text.Customer.l84')],
            c3All: [
                { name: this.$t('text.Customer.l81'), value: 12 }, { name: this.$t('text.Customer.l82'), value: 16 },
                { name: this.$t('text.Customer.l83'), value: 22 }, { name: this.$t('text.Customer.l84'), value: 32 }
            ],
            c4: [this.$t('text.Customer.l85'), this.$t('text.Customer.l86'), this.$t('text.Customer.l87')],
            c4All: [
                { name: this.$t('text.Customer.l85'), value: 12 }, { name: this.$t('text.Customer.l86'), value: 16 },
                { name: this.$t('text.Customer.l87'), value: 22 }
            ],
            c5: [this.$t('text.Customer.l88'), this.$t('text.Customer.l89'), this.$t('text.Customer.l90'),
            this.$t('text.Customer.l91'), this.$t('text.Customer.l92')],
            c5All: [
                { name: this.$t('text.Customer.l88'), value: 12 }, { name: this.$t('text.Customer.l89'), value: 16 },
                { name: this.$t('text.Customer.l90'), value: 22 }, { name: this.$t('text.Customer.l91'), value: 22 },
                { name: this.$t('text.Customer.l92'), value: 22 }
            ],
        }
    },
    mounted() {
    },
    methods: {
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.t1 {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    padding-right: 35px;
    padding-left: 35px;
    height: 100%;
    gap: 20px;
}


.t5 {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 35%;
}

.t9 {
    border: 1px solid #999;
    border-radius: 8px;
    flex: 1;
    height: 100%;
}

.s1 {
    margin-left: 25px;
    margin-right: 25px;
    padding: 10px 0;
    height: 23px;
    line-height: 23px;
    font-size: 13px;

}

.i1 {
    position: relative;
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
    background: #f2f2f2;
    height: 23px;
    line-height: 23px;
    font-size: 13px;
    border-radius: 50px;
}

.i2 {
    background-image: linear-gradient(to right, #a1f3fc, #4cf3db, #0af3c1);
    border-radius: 50px;
    width: 200px;
}

.i3 {
    position: absolute;
    right: 10px;
}

.i4 {
    position: relative;
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
    background: #f2f2f2;
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    border-radius: 5px;
    padding-left: 10px;
    font-weight: 700;
}

.i5 {
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
    font-size: 13px;
    padding-top: 15px;
}

.i6 {
    position: relative;
    display: flex;
    background: #f2f2f2;
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    border-radius: 5px;
    padding-left: 10px;
    font-weight: 700;
    margin: 10px 0;
}
</style>